<template>
	<view class="myTab">
		<view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+ 180)+'rpx'"></view>
		<view class="_top" :style="'height: '+ menuButtonInfo.top+'px;'"></view>
		<view class="_top_title z_index" :style="'top:'+(2*menuButtonInfo.top)+'rpx'">占位符</view>
		<view class="tap_swiper" :style="'top:'+(2*menuButtonInfo.top +80)+'rpx'">
			<!-- :active-item-style='{"fontSize": "40rpx"}' -->
			<u-tabs-swiper  :bar-style='{"backgroundColor": "#F10200"}'
				height=90 font-size=34 :bold="false" active-color="#000000" inactive-color="#BBBBBB" ref="uTabs"
				:list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750">
			</u-tabs-swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props:['pageName','menuButtonInfo','list','current'],
		methods:{
			tabsChange(index){
				this.$emit('tabsChange',index);
			}
		}
	}
</script>

<style lang="scss">
	.myTab{
		
		.bg_top {
			width: 750rpx;
			background-color: #ffffff;
			position: fixed;
			z-index: 9;
		}
		
		._top {
			width: 750rpx;
		}
		
		._top_title {
			width: 750rpx;
			font-size: 56rpx;
			font-weight: 700;
			color: #040000;
			line-height: 60rpx;
			padding: 1rpx 0 0 40rpx;
			position: fixed;
			border-bottom: 1rpx solid #e5e5e5;
			color: transparent;
			padding-bottom: 12rpx;
		}
		
		.z_index {
			z-index: 10;
		}
		
		.tap_swiper {
			position: fixed;
			width: 100%;
			z-index: 9;
			// margin-left: 23rpx;
		
		}
	}
</style>
